<template>
  <view class="tab-content">
    <view class="l-title"> 租住类型 </view> 
    <view class="tags"> 
          <nut-tag plain closeable round :class="item.choose?'cur-tag':''" v-for="(item,i) in tmp.rentalTypes"  :key="'rentalTypes'+i" @close="close('rentalType',i)"> <text  class="tag-txt" @click.stop="click('rentalType',i)"> {{ item.text}} </text> </nut-tag>
    </view>
    <view class="l-title"> 物业配置 </view> 
    <view class="tags"> 
          <nut-tag plain closeable round :class="item.choose?'cur-tag':''" v-for="(item,i) in tmp.propertyConfigurations"  :key="'propertyConfigurations'+i" @close="close('propertyConfiguration',i)"> <text  class="tag-txt" @click.stop="click('rentalType',i)"> {{ item.text}} </text> </nut-tag>
    </view>
    <view class="l-title"> 特色标签 </view> 
    <view class="tags"> 
          <nut-tag plain closeable round :class="item.choose?'cur-tag':''" v-for="(item,i) in tmp.specialLabels"  :key="'specialLabels'+i" @close="close('specialLabel',i)"> <text  class="tag-txt" @click.stop="click('rentalType',i)"> {{ item.text}} </text> </nut-tag>
    </view>
     
  </view>
</template>
<script>  
import Taro, { useReady,getCurrentInstance} from '@tarojs/taro' 
export default { 
 data() {
    return {
      tmp:{}, 
    }
  },
  mounted(){ 
      var { slogan , describe} = this.$store.state.publishInfo
      var tmp = {
        rentalType:"房间大,透风,*花园,*房东好,房间大,透风,*花园,*房东好"
      }
      if(tmp.rentalType){ tmp.rentalTypes = tmp.rentalType.split(",").map(e=>{ return { choose:e.startsWith("*"), text:e.replace("*",'') } }) }
      console.log(this.tmp);
      this.tmp = tmp
  },
  methods:{
      close(key,index){
        var tmp = {...this.tmp};
        tmp[key+'s'].splice(index,1)
        this.tmp = tmp;
      },
      click(key,index){
        var tmp = {...this.tmp};
        tmp[key+'s'][index].choose = !tmp[key+'s'][index].choose
        this.tmp = tmp;
      },
      change(){
        this.$store.dispatch("asyncPublishInfo",{type:index});
      }
  }
}
/*
color
text-color
click
close
*/
</script>  
<style lang="less">
 .nut-tag--close{
   width: 6px !important;
   height: 6px !important;
   font-size: 10px!important;
 }
 .nut-tag--plain{
   padding: 2px 10px !important;
   margin-right: 5PX!important;
   color:#ccc !important;
   border: 1px solid #ccc !important;
 }
 .cur-tag{
    color: #FEDE62 !important;
    border: 1px solid  #FEDE62!important;
 }
 .tag-txt{
   margin-right: 5px;
 }
</style>